<template>
  <div class="file-table-container">
    <!-- 文件表格 -->
    <el-table 
      :data="files"
      stripe
      style="width: 100%"
      class="file-table"
      v-loading="loading"
      @sort-change="handleSortChange"
    >
      <!-- 文件名列 -->
      <el-table-column prop="file_name" label="文件名" min-width="200" sortable="custom">
        <template #default="scope">
          <div class="file-name-cell">
            <el-icon class="file-icon"><Document /></el-icon>
            <span>{{ scope.row.file_name }}</span>
          </div>
        </template>
      </el-table-column>
      
      <!-- 文件ID列 -->
      <el-table-column prop="file_id" label="文件ID" width="150" sortable="custom">
        <template #default="scope">
          <el-tooltip :content="scope.row.file_id" placement="top">
            <span>{{ truncateText(scope.row.file_id, 8) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      
      <!-- 存储路径列 -->
      <el-table-column prop="file_path" label="存储路径" min-width="250" sortable="custom">
        <template #default="scope">
          <el-tooltip :content="scope.row.file_path" placement="top">
            <span>{{ truncatePath(scope.row.file_path) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      
      <!-- 创建日期列 -->
      <el-table-column prop="create_date" label="创建日期" width="180" sortable="custom">
        <template #default="scope">
          {{ formatDate(scope.row.create_date) }}
        </template>
      </el-table-column>
      
      <!-- 用户ID列 -->
      <el-table-column prop="user_id" label="用户ID" width="120" sortable="custom">
        <template #default="scope">
          <el-tag type="info" size="small">
            {{ truncateText(scope.row.user_id, 6) }}
          </el-tag>
        </template>
      </el-table-column>
      
      <!-- 操作列 -->
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <div class="action-buttons">
            <el-button 
              type="primary" 
              size="small" 
              icon="Download" 
              circle 
              @click="emit('download', scope.row)"
            />
            <el-button 
              type="success" 
              size="small" 
              icon="View" 
              circle 
              @click="emit('preview', scope.row)"
            />
            <el-button 
              type="warning" 
              size="small" 
              icon="Edit" 
              circle 
              @click="emit('rename', scope.row)"
            />
            <el-button 
              type="danger" 
              size="small" 
              icon="Delete" 
              circle 
              @click="emit('delete', scope.row)"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页控件 -->
    <el-pagination
      v-if="files.length > 0"
      class="pagination"
      v-model:current-page="pagination.page"
      v-model:page-size="pagination.page_size"
      :page-sizes="[5, 10, 20, 50]"
      :total="pagination.total_items"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="emit('size-change', $event)"
      @current-change="emit('current-change', $event)"
    />
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import { Document, Download, View, Edit, Delete } from '@element-plus/icons-vue';

// 定义组件属性
const props = defineProps({
  files: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  pagination: {
    type: Object,
    default: () => ({
      page: 1,
      page_size: 10,
      total_items: 0,
      total_pages: 1
    })
  }
});

// 定义组件事件
const emit = defineEmits([
  'download', 
  'preview', 
  'rename', 
  'delete',
  'size-change',
  'current-change',
  'sort-change'
]);

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString();
};

// 截断长文本
const truncateText = (text, maxLength) => {
  if (!text) return '';
  if (text.length > maxLength) {
    return text.substring(0, maxLength) + '...';
  }
  return text;
};

// 截断路径显示
const truncatePath = (path) => {
  if (!path) return '';
  if (path.length > 30) {
    const parts = path.split('\\');
    if (parts.length > 2) {
      return '.../' + parts.slice(-2).join('/');
    }
    return path.substring(0, 15) + '...' + path.substring(path.length - 15);
  }
  return path;
};

// 处理排序变化
const handleSortChange = ({ column, prop, order }) => {
  emit('sort-change', { column, prop, order });
};
</script>

<style scoped lang="scss">
@use "@/assets/FileTableVue.scss";
</style>